

//表格1
layui.use('table', function(){
    var table = layui.table ,form = layui.form;
    //第一个实例
    table.render({
        elem: '#demo'
        ,height: 315
        ,url:"/admin/user/show" //数据接口
        ,page: true //开启分页
        ,id:'idTest'
        ,cols: [[ //表头
            {type:'checkbox'}
            ,{field:'id', width:80,edit: 'text',title: 'ID', sort: true}
            ,{field:'name', width:80,edit: 'text', title: '用户名'}
            ,{field:'address', width:80,edit: 'text', title: '性别', sort: true}
            ,{field:'phone', width:80,edit: 'text', title: '城市'}
            ,{field:'email', title: '签名',edit: 'text', minWidth: 100}
            ,{fixed: 'right', title:'操作',edit: 'text',align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
        ]]
    });
    //分页操作
    var $ = layui.$, active = {
        reload: function(){
            var demoReload = $('#demoReload');
            //执行重载
            table.reload('idTest', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                ,where: {
                    key: {
                        id: demoReload.val()
                    }
                }
            });
        }
    };

    $('.demoTable .layui-btn').on('click', function(){
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });
    //复选框操作
    var $ = layui.$, active = {
        getCheckData: function(){ //获取选中数据
            var checkStatus = table.checkStatus('idTest')
                ,data = (checkStatus.data);
            console.log(JSON.stringify(data[0]['id']));
            var arr=[];
            for(var i=0;i<data.length;i++)
            {
                arr.push(data[i]['id']);
            }
            var data1=Object.assign({},arr)
            $.ajax({
                //几个参数需要注意一下
                type: "get",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "/admin/user/del" ,//url
                data:data1 ,
                success: function (result) {
                    layer.msg('删除成功');
                    window.location.reload();

                },
            });
        }
        ,getCheckLength: function(){ //获取选中数目
            var checkStatus = table.checkStatus('idTest')
                ,data = checkStatus.data;
            layer.msg('选中了：'+ data.length + ' 个');
        }
        ,isAll: function(){ //验证是否全选
            var checkStatus = table.checkStatus('idTest');
            layer.msg(checkStatus.isAll ? '全选': '未全选')
        }
    };
    //表操作
    table.on('tool(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
        var data = obj.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        var tr = obj.tr; //获得当前行 tr 的DOM对象
        var arr=['id','name','phone','email'];
        var fliters=(filter(arr)+'</div>');
        function filter(str) {
            var field_array=field()[0]//获取字段对应的中文
            console.log(field_array);
            var a = '<div style="padding: 10px; line-height: 42px; background-color: #393D49; color: #fff; font-weight: 300;">';
            str.forEach(function(i,index){
                if(data[i]!=null)
                {
                    a+='<span class="layui-form-label" style="width:200px;text-align: left" >'+" "+field_array[i]+":"+data[i]+"</span><br>";
                }
            })
            return a;

        }
        if(layEvent === 'detail'){ //查看
            //示范一个公告层
            layer.open({
                type: 1
                ,title: "大家好" //False不显示标题栏
                ,closeBtn: false
                ,area: '300px;'
                ,shade: 0.8
                ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
                ,btn: ['火速围观', '残忍拒绝']
                ,btnAlign: 'c'
                ,moveType: 1 //拖拽模式，0或者1
                ,content:fliters //调用的函数
                ,success: function(layero){
                    var btn = layero.find('.layui-layer-btn');
                    btn.find('.layui-layer-btn0').attr({
                        href: '/'
                        ,target: '_self'
                    });
                    //filter()
                }
            });
        } else if(layEvent === 'del'){ //删除
            layer.confirm('真的删除行么', function(index){
                obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                layer.close(index);
                //向服务端发送删除指令
                window.location.href='/admin/user/'+data.id+'/delete'
            });
        } else if(layEvent === 'edit'){ //编辑
            $.ajax({
                //几个参数需要注意一下
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "/admin/user/"+data.id+"/update" ,//url
                data:data ,
                success: function (result) {
                    if(result['statu']==0){
                        layer.msg('请双击需要修改的地方，做出修改后再点击编辑 谢谢');
                    }
                    else{
                        layer.msg('修改成功');
                    }
                },
            });
        }
    });
})


layui.use('element', function() {
    var $ = layui.jquery
        , element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
    //触发事件

    var active = {
        tabAdd: function () {
            //新增一个Tab项
            element.tabAdd('demo', {
                title: '新选项' + (Math.random() * 1000 | 0) //用于演示
                , content: '内容' + (Math.random() * 1000 | 0)
                , id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
            })
        }
        , tabDelete: function (othis) {
            //删除指定Tab项
            element.tabDelete('demo', '44'); //删除：“商品管理”
            othis.addClass('layui-btn-disabled');
        }
        , tabChange: function () {
            //切换到指定Tab项
            element.tabChange('demo', '22'); //切换到：用户管理
        }
    };
})


